<template>
  <div class="home">
    <van-nav-bar
      title="首页"
      :right-text="userName"
      @click-right="onClickRight"
    />
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>驿站精选，洗衣超划算</van-swipe-item>
        <van-swipe-item>羽绒服换季清晰不止八折</van-swipe-item>
        <van-swipe-item>春节洗衣大回馈</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词"/>
    <div class="home-swipe-head">
      <span class="recommend">今日推荐</span>
      <span class="tips">每天都有新发现</span>
      <span class="swipe-num">
        <span class="indexPage">{{ indexPage + 1 }}</span>
        <span class="pageNum">/{{swipeNum}}</span>
      </span>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="changeSwipe">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item" height="150" width="100%"/>
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="true" :column-num="3" :gutter="10">
      <van-grid-item v-for="item in goods" :key="item.aid" @click="open(item.aid)">
        <div class="gridText">
          <div class="gridTextTitle">{{ item.aname }}</div>
          <div class="gridDesc">{{ item.desc}}</div>
        </div>
        <van-image :src="item.pic" />
      </van-grid-item>
    </van-grid>
    <van-row >
      <van-col span="1"></van-col>
      <van-col span="22">
        <span class="recommend">单买热品</span>
        <span class="tips">邻居门都在洗的TOP10</span>
      </van-col>
      <van-col span="1"></van-col>
    </van-row>

    <!--热门商品组件-->
    <googs-list :goodstop10="goodstop10"></googs-list>

    <van-row>
      <div class="more"  @click="more">查看更多&gt;</div>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="22">
        <div class="homeTitle">服务流程</div>
      </van-col>
      <van-col span="22">
        <el-steps :active="1">
          <el-step title="在线下单" icon="el-icon-mobile-phone"></el-step>
          <el-step title="送往驿站" icon="el-icon-location-outline"></el-step>
          <el-step title="专业洗涤" icon="el-icon-loading"></el-step>
          <el-step title="驿站取衣" icon="el-icon-truck"></el-step>
        </el-steps>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="22">
        <div class="homeTitle">服务保障</div>
      </van-col>
      <van-col span="24">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-image  width="70" height="50" :src="testImage"/>
            <div class="fearture1">更低价</div>
            <div class="fearture2">工厂直洗</div>
            <div class="fearture2">更省20%</div>
          </van-grid-item>
          <van-grid-item>
            <van-image  width="70" height="50" :src="testImage"/>
            <div class="fearture1">更干净</div>
            <div class="fearture2">15道工序</div>
            <div class="fearture2">进口设备</div>
          </van-grid-item>
          <van-grid-item>
            <van-image  width="70" height="50" :src="testImage"/>
            <div class="fearture1">更方便</div>
            <div class="fearture2">驿站取送</div>
            <div class="fearture2">免费保管</div>
          </van-grid-item>
          <van-grid-item>
            <van-image  width="70" height="50" :src="testImage"/>
            <div class="fearture1">更安心</div>
            <div class="fearture2">全面消毒</div>
            <div class="fearture2">全程监控</div>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
  </div>

</template>
<script>
export default {
  data() {
    return {
      testImage:'https://img01.yzcdn.cn/vant/cat.jpeg',
      value: "",
      userName: '登录',
      indexPage: 1,
      swipeNum: 10,
      images: [
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
      ],
      goods: [
        {
          pic: "https://img01.yzcdn.cn/vant/cat.jpeg",
          aname: "洗衣服",
          desc: "洗完穿\"新\"衣",
        },
        {
          pic: "https://img01.yzcdn.cn/vant/cat.jpeg",
          aname: "洗鞋靴",
          desc: "15道超精细洗",
        },
        {
          pic: "https://img01.yzcdn.cn/vant/cat.jpeg",
          aname: "洗家居",
          desc: "螨虫去无踪",
        },
      ],
      goodstop10: [{
        goodsDesc: "",
        goodsId: 1,
        goodsName: "羽绒服温馨洗",
        goodsOriginprice: 50,
        goodsSale: 0,
        goodsTag: "超值优惠",
        goodsType: 1,
      },
      {
        goodsDesc: "",
        goodsId: 1,
        goodsName: "羽绒服温馨洗",
        goodsOriginprice: 50,
        goodsSale: 0,
        goodsTag: "超值优惠",
        goodsType: 1,
      }]
    };
  },
  created: function () {4
    var m=this.$route.query.userName;
    if(m==''||m==null){
      this.userName="登录";
    }else{
      this.userName=m;
    }
    this.$axios
      .get("/goods/list")
      .then((res) => {
        if (res.data.code == 200) {
          this.goodstop10 = res.data.info;
          for (var i in this.goodstop10) {
            this.images[i] = this.goodstop10[i].goodsPic;
          }
          this.swipeNum=this.goodstop10.length;
          //console.log(this.images);
        }
      })
      .catch(error => {
        console.log("请求商品数据失败了")
      });
  },
 
  methods: {
    onClickRight: function () {
      if(this.userName=="登录"){
        this.$router.push({ path: "/user/login" });
      }else{
        this.$router.push({ path: "/user/personal" });
      } 
    },
    changeSwipe(index) {
      this.indexPage = index;
    },
    open(key) {
      //console.log(key);
      this.$axios
      .post( "/cart/list/"+key )
      .then(res)
      .catch(error);
    },
    more(){

    }
  },
};
</script>

<style>
.home {
  padding-bottom: 50px;
}
.gridText{
  text-align: center
}
.gridTextTitle{
  font-size:14px;
  font-weight: 900;
}
.gridDesc{
  font-size:12px
}
.homeTitle{
  padding-bottom:10px;
  padding-top:10px;
  font-size: 16px;
}
.fearture1{
  font-size: 16px;
  font-weight: bold;
  color:#388ac5
}
.fearture2{
  font-size: 12px;
  color:#606060;
}
.more{
  text-align: center;
  font-size: 16px;
  color: #040404;
  margin:6px
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #fbfcfd;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.recommend {
  font-weight: 700;
}
.tips {
  font-size: 12px;
  margin-left: 6px;
  color: #8f8f8f;
}
.swipe-num {
  float: right;
}
.indexPage {
  font-weight: 700;
}
.pageNum {
  font-size: 12px;
  color: #8f8f8f;
}
</style>
